@extends('layouts.console_header')

@section('title', '省份管理')

@section('resources')
    @parent
<style>
    .outer{width: 1100px;margin: 0 auto;background-color: #fff;padding: 50px;}
    .pro_province_ul{margin-left: 0;}
    .pro_city_ul{margin-left: 20px;}
    .pro_proper_ul{margin-left: 20px;}
    .pro_business_ul{margin-left: 20px;}
    .pro_province_li{overflow: hidden;margin-top: 10px;}
    .pro_city_li{overflow: hidden;margin-top: 10px;}
    .pro_proper_li{overflow: hidden;margin-top: 10px;}
    .pro_business_li{overflow: hidden;margin-top: 10px;}
    .name{float: left;height: 20px;font-size: 18px;}
    .add_name{float: left;border: 1px solid #d1d1d1;height: 20px;}
    .pro_feature{float: right;overflow: hidden;}
    .pro_feature span{float: left;margin: 0 10px;}
    .pro_province_div{overflow: hidden;}
    .pro_city_div{overflow: hidden;}
    .pro_proper_div{overflow: hidden;}
    img{width: 20px;height: 20px;float: left;margin-right: 10px;}
    .pro_namediv{border: 1px solid #ccc;padding: 5px;height: 22px;}
    .pro_name{font-size: 18px;}
</style>
@endsection

@section('content')
<section class="user_list">
    <div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
        <p class="fz_14 account_title fl" style="border: none;"><span style="color: #7f7f7f;">
            <a href="/console/index">首页</a>>地区管理></span><span class="co_violet">省份</span>
        </p>
    </div>
    <div class="outer">
        <div class="pro_all_div oh">
            <p><span class="pro_new_add fr" style="padding: 5px 10px;background-color: #9955c6;color: #fff;border-radius: 5px;">+新增子区域</span></p>
        </div>
        <ul class="pro_province_ul">
            {{--<li class="pro_province_li"> <!-- 省份 -->--}}
                {{--<div class="pro_province_div pro_namediv">--}}
                    {{--<img src="{{env('IMAGE_DOMAIN')}}images/console/spread.png" alt="">--}}
                    {{--<input class="pro_name" type="text" name="" value="江西省" readonly="readonly">--}}
                    {{--<input type="hidden" name="provinceid" value="provinceid1">--}}
                    {{--<p class="pro_feature">--}}
                        {{--<span class="pro_new_add">新增子区域</span>--}}
                        {{--<span class="pro_revise">修改</span>--}}
                        {{--<span class="pro_totop">置顶</span>--}}
                        {{--<span class="pro_delete">删除</span>--}}
                    {{--</p>--}}
                {{--</div>--}}
                {{--<ul  class="pro_city_ul">--}}
                    {{----}}
                {{--</ul>--}}
            {{--</li>--}}

            @foreach($lists as $list)
                <li class="pro_province_li"> <!-- 省份 -->
                    <div class="pro_province_div pro_namediv">
                        <img src="{{env('IMAGE_DOMAIN')}}images/console/spread.png" alt="">
                        <input class="pro_name" type="text" name="" value="{{$list['name']}}" readonly="readonly">
                        <input type="hidden" name="provinceid" value="{{$list['provinceid']}}">
                        <p class="pro_feature">
                            <span class="pro_new_add">新增子区域</span>
                            <span class="pro_revise">修改</span>
                            <span class="pro_totop">置顶</span>
                            <span class="pro_delete">删除</span>
                        </p>
                    </div>
                    <ul  class="pro_city_ul">

                    </ul>
                </li>
            @endforeach
        </ul>
    </div>
</section>

@endsection

@section('scriptResources')
    @parent
<script>
    var cityid = '{{$cityid}}';
    $("button").click(function(){
        $(".name").removeAttr("readonly")
    });
    //添加省份、城市、等名称
    $(".outer").on("click",".pro_new_add",function(){
        var pro_province_lis=$('<li class="pro_province_li">'+
                                '    <div class="pro_province_div pro_namediv">'+
                                        '<img src="/images/console/none.png" alt="">'+
                                        '<input class="add_name" type="text" name="" value="">'+
                                        '<input type="hidden" name="provinceid" value="">'+
                                        '<p class="pro_feature">'+
                                            '<span class="pro_keep">保存</span>'+
                                            '<span class="pro_cancel">取消</span>'+
                                        '</p>'+
                                    '</div>'+
                                    '<ul class="pro_city_ul"></ul>'+
                                '</li>');
        var pro_city_lis=$('<li class="pro_city_li">'+
                                '<div class="pro_city_div pro_namediv">'+
                                    '<img src="/images/console/none.png" alt="">'+
                                    '<input class="add_name" type="text" name="" value="">'+
                                    '<input type="hidden" name="cityid" value="">'+
                                    '<p class="pro_feature">'+
                                        '<span class="pro_keep">保存</span>'+
                                        '<span class="pro_cancel">取消</span>'+
                                    '</p>'+
                                '</div>'+
                                '<ul class="pro_proper_ul"></ul>'+
                            '</li>');
        var pro_proper_lis=$('<li class="pro_proper_li">'+
                                '<div class="pro_proper_div pro_namediv">'+
                                    '<img src="/images/console/none.png" alt="">'+
                                    '<input class="add_name" type="text" name="" value="">'+
                                    '<input type="hidden" name="properid" value="">'+
                                    '<p class="pro_feature">'+
                                        '<span class="pro_keep">保存</span>'+
                                        '<span class="pro_cancel">取消</span>'+
                                    '</p>'+
                                '</div>'+
                                '<ul class="pro_business_ul"></ul>'+
                            '</li>');
        var pro_business_li=$('<li class="pro_business_li">'+
                                '<div class="pro_business_div pro_namediv">'+
                                    '<img src="/images/console/none.png" alt="">'+
                                    '<input class="add_name" type="text" name="" value="">'+
                                    '<input type="hidden" name="businessid" value="">'+
                                    '<p class="pro_feature">'+
                                        '<span class="pro_keep">保存</span>'+
                                        '<span class="pro_cancel">取消</span>'+
                                    '</p>'+
                                '</div>'+
                            '</li>');
        //添加省份
        if ($(this).parent().parent().siblings().attr("class") == "pro_province_ul") {
            $(this).parent().parent().siblings(".pro_province_ul").prepend(pro_province_lis);
        };
        //添加城市
        if ($(this).parent().parent().siblings().attr("class") == "pro_city_ul") {
            $(this).parent().parent().siblings(".pro_city_ul").prepend(pro_city_lis);
        };
        //添加区县
        if ($(this).parent().parent().siblings().attr("class") == "pro_proper_ul") {
            $(this).parent().parent().siblings(".pro_proper_ul").prepend(pro_proper_lis);
        };
        //添加商圈
        if ($(this).parent().parent().siblings().attr("class") == "pro_business_ul") {
            $(this).parent().parent().siblings(".pro_business_ul").prepend(pro_business_li);
        };
    });
    //省份、城市、等名称修改
    $(".outer").on("click",".pro_revise",function(){
        $(this).parent(".pro_feature").siblings("input").attr("class","add_name");
        $(".add_name").attr("readonly",false);
        $(this).parent(".pro_feature").html('<span class="pro_keep">保存</span><span class="pro_cancel">取消</span>');
    });
    //删除
    $(".outer").on("click",".pro_delete",function(){
        $(this).parent().parent().parent().remove();
    });
    //取消修改
    $(".outer").on("click",".pro_cancel",function(){
        $(this).parent().parent().parent().remove();
    });
    //城市展开收起
    $(".outer").on("click","img",function(){
        var imgsrc = $(this).attr("src");
        if(imgsrc.indexOf("retract") > 0){
            $(this).attr("src","{{env('IMAGE_DOMAIN')}}images/console/spread.png");
            $(this).parent().siblings().children("li").remove();
        }else if(imgsrc.indexOf("spread") > 0){
            //展开省下面的市
            if ($(this).parent().siblings().attr("class") == "pro_city_ul") {
                $(this).attr("src","{{env('IMAGE_DOMAIN')}}images/console/retract.png");
                var provinceid = $(this).siblings('input[name="provinceid"]').val();
                var pro_city_ul = $(this).parent().siblings(".pro_city_ul")
                console.log(provinceid);
                 $.ajax({
                     url : "/console/system/area/sublist",
                     type : "get",
                     data : {
                         type:'city',
                         parentid:provinceid,
                         cityid:1
                         },
                     dataType: "json",
                     success:function (data){
                         if(data.status == 'success') {
                            //var citys = ['南昌市','景德镇市','新余市'];
                            var citys = data.data;
                            for (var i = 0; i < citys.length; i++) {
                                var city_info = citys[i];
                                var pro_city_lis=$('<li class="pro_city_li">'+
                                                            '<div class="pro_city_div pro_namediv">'+
                                                                '<img src="/images/console/spread.png" alt="">'+
                                                                '<input class="pro_name" type="text" name="" value="' + city_info.name + '" readonly="readonly">'+
                                                                '<input type="hidden" name="cityid" value="' + city_info.id + '">'+
                                                                '<p class="pro_feature">'+
                                                                    '<span class="pro_new_add">新增子区域</span>'+
                                                                    '<span class="pro_revise">修改</span>'+
                                                                    '<span class="pro_totop">置顶</span>'+
                                                                    '<span class="pro_delete">删除</span>'+
                                                                '</p>'+
                                                            '</div>'+
                                                            '<ul class="pro_proper_ul"></ul>'+
                                                        '</li>')
                                pro_city_ul.prepend(pro_city_lis);
                            };
                         } else {
                             alert(data.message);
                         }
                     }
                 });
            };
            //展开市下面的区县
            if ($(this).parent().siblings().attr("class") == "pro_proper_ul") {
                $(this).attr("src","{{env('IMAGE_DOMAIN')}}images/console/retract.png");
                var cityid = $(this).siblings('input[name="cityid"]').val();
                var pro_proper_ul = $(this).parent().siblings(".pro_proper_ul")
                console.log(cityid);
                 $.ajax({//TODO
                     url : "/console/user/banner/status/update",
                     type : "post",
                     data : {
                         status:'1'
                         },
                     dataType: "json",
                     success:function (data){
                         if(data.status == 'success') {
                            var propers = ['西湖区','东湖区'];
                            for (var i = 0; i < propers.length; i++) {
                                var pro_proper_lis=$('<li class="pro_proper_li">'+
                                                        '<div class="pro_proper_div pro_namediv">'+
                                                            '<img src="/images/console/spread.png" alt="">'+
                                                            '<input class="pro_name" type="text" name="" value="'+propers[i]+'" readonly="readonly">'+
                                                            '<input type="hidden" name="properid" value="properid'+i+'">'+
                                                            '<p class="pro_feature">'+
                                                                '<span class="pro_new_add">新增子区域</span>'+
                                                                '<span class="pro_revise">修改</span>'+
                                                                '<span class="pro_totop">置顶</span>'+
                                                                '<span class="pro_delete">删除</span>'+
                                                            '</p>'+
                                                        '</div>'+
                                                        '<ul class="pro_business_ul"></ul>'+
                                                    '</li>')
                                pro_proper_ul.prepend(pro_proper_lis);
                            };
                        } else {
                            alert(data.message);
                        }
                    }
                });
            };
            //展开区县下面的商圈
            if ($(this).parent().siblings().attr("class") == "pro_business_ul") {
                $(this).attr("src","{{env('IMAGE_DOMAIN')}}images/console/retract.png");
                var businessid = $(this).siblings('input[name="properid"]').val();
                var pro_business_ul = $(this).parent().siblings(".pro_business_ul")
                console.log(businessid);
                $.ajax({//TODO
                    url : "/console/user/banner/status/update",
                    type : "post",
                    data : {
                        status:'1'
                        },
                    dataType: "json",
                    success:function (data){
                        if(data.status == 'success') {
                            var business = ['八一大道','学府大道','北京西路'];
                            for (var i = 0; i < business.length; i++) {
                                var pro_business_li=$('<li class="pro_business_li">'+
                                                            '<div class="pro_business_div pro_namediv">'+
                                                                '<img src="/images/console/none.png" alt="">'+
                                                                '<input class="pro_name" type="text" name="" value="'+business[i]+'" readonly="readonly">'+
                                                                '<input type="hidden" name="businessid" value="businessid'+i+'">'+
                                                                '<p class="pro_feature">'+
                                                                    '<span class="pro_new_add">新增子区域</span>'+
                                                                    '<span class="pro_revise">修改</span>'+
                                                                    '<span class="pro_totop">置顶</span>'+
                                                                    '<span class="pro_delete">删除</span>'+
                                                                '</p>'+
                                                            '</div>'+
                                                        '</li>')
                                pro_business_ul.prepend(pro_business_li);
                            };
                        } else {
                            alert(data.message);
                        }
                    }
                });
            };
        }
    });
    //保存修改
    $(".outer").on("click",".pro_keep",function(){
        //图片＋ - 或空
        if($(this).parent().parent().parent().parent().siblings("div").attr("class") != "pro_all_div oh"){
            var imgssrc = $(this).parent().parent().parent().parent().siblings("div").children('img').attr("src");
            if(imgssrc.indexOf('none') > 0){
                $(this).parent().parent().parent().parent().siblings("div").children('img').attr("src","/images/console/retract.png");
            };
        }
        if($(this).parent().siblings("input").val() == ""){
            alert("城市名不能为空");return;
        }else{
            var newid = $(this).parent().parent().parent().parent().siblings().children('input[type="hidden"]').val();
            var newcitysname = $(this).parent().siblings("input").val();
            $(this).parent().siblings("input").attr("readonly","readonly");
            $(this).parent(".pro_feature").siblings().attr("class","pro_name");
            if ($(this).parent().parent().attr("class") == "pro_business_div pro_namediv") {
                $(this).parent(".pro_feature").html('<span class="pro_revise">修改</span><span class="pro_totop">置顶</span><span class="pro_delete">删除</span>');
            }else{
                $(this).parent(".pro_feature").html('<span class="pro_new_add">新增子区域</span><span class="pro_revise">修改</span><span class="pro_totop">置顶</span><span class="pro_delete">删除</span>');
            };
            //保存修改或新增城市名
            console.log(newid);
            console.log(newcitysname);
            $.ajax({//TODO
                url : "/console/user/banner/status/update",
                type : "post",
                data : {
                    newid:newid,
                    newcitysname:newcitysname,
                    status:'1'
                    },
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        console.log($(this).parent().siblings("input").val());
                    } else {
                        alert(data.message);
                    }
                }
            });
        }
    })
</script>
@endsection